<template>
  <div>
    <SearchAndList>
      <!-- 搜索框 S -->
      <template #search>
        <el-form :inline="true" :model="searchForm">
          <el-form-item label="设备编号" size="medium">
            <el-input
              v-model="searchForm.taskCode"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              @click="getVmSearchManager"
              size="medium"
              icon="el-icon-search"
              >查询</el-button
            >
          </el-form-item>
        </el-form>
      </template>
      <!-- 搜索框 E -->

      <!-- 列表开始 -->
      <template #list>
        <el-table
          v-loading="loading"
          :data="TypeData.currentPageRecords"
          style="width: 100%; font-size: 14px"
        >
          <el-table-column type="selection" width="55" show-overflow-tooltip />
          <!-- 序号 -->
          <el-table-column
            type="index"
            :index="getIndex"
            label="序号"
            width="80"
          />
          <!-- 设备编号 -->
          <el-table-column prop="innerCode" label="设备编号" />
          <!-- 设备型号 -->
          <el-table-column prop="type.name" label="设备型号" />
          <!-- 详细地址 -->
          <el-table-column label="详细地址" prop="node.name" />
          <el-table-column prop="ownerName" label="合作商" />
          <el-table-column label="设备状态">
            <template v-slot="{ row }">{{
              row.vmStatus ? (row.vmStatus === 1 ? "运营" : "撤机") : "未投放"
            }}</template>
          </el-table-column>
          <!-- 操作 -->
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                @click.native.prevent="channel(scope)"
                type="text"
                size="small"
                style="font-size: 14px"
              >
                货道
              </el-button>
              <el-button
                @click.native.prevent="policy(scope)"
                type="text"
                size="small"
                style="font-size: 14px"
              >
                策略
              </el-button>
              <el-button
                @click.native.prevent="changeType(scope)"
                type="text"
                size="small"
                style="font-size: 14px"
              >
                修改
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
      <!-- 列表结束 -->

      <!-- 按钮开始 -->
      <template #buttons>
        <el-button
          size="medium"
          icon="el-icon-circle-plus-outline"
          @click="addType"
          >新建</el-button
        >
        <el-button size="medium" @click="morePolicy">批量操作</el-button>
      </template>
      <!-- 按钮结束 -->

      <!-- 底部分页开始 -->
      <template #bottom>
        <el-pagination
          @current-change="paginaTion"
          layout="slot, prev, next"
          :page-size="10"
          :total="getTotalCount"
          prev-text="上一页"
          next-text="下一页"
          background
        >
          <template>
            <div class="str">
              共{{ TypeData.totalCount }}条记录&nbsp;&nbsp;第
              {{ TypeData.pageIndex }}/{{ TypeData.totalPage }} 页
            </div>
          </template>
        </el-pagination>
      </template>
      <!-- 底部分页结束 -->
    </SearchAndList>
    <AddDialogManager :addVisible.sync="addVisible"></AddDialogManager>
    <ChangDialogManager :ChangeVisible.sync="ChangeVisible" :changeScope="changeScope" :TypeData="TypeData.currentPageRecords" @searchType="getVmSearchManager"></ChangDialogManager>
    <PolicyManger :policyVisible.sync="policyVisible" :policySope ="policySope"></PolicyManger>
    <MorePolicyManger :morePolicyVisible.sync="morePolicyVisible"></MorePolicyManger>
    <ChannelList :ChannelVisible.sync="ChannelVisible"></ChannelList>
  </div>
</template>

<script>
import { getVmSearchManager } from '@/api/Equipment'
import AddDialogManager from './components/AddDialogManager.vue'
import ChangDialogManager from './components/ChangDialogManager.vue'
import SearchAndList from '@/components/SearchAndList.vue'
import PolicyManger from './components/PolicyManger.vue'
import MorePolicyManger from './components/MorePolicyManger.vue'
import ChannelList from './components/ChannelList.vue'
export default {
  components: { SearchAndList, AddDialogManager, ChangDialogManager, PolicyManger, MorePolicyManger, ChannelList },
  data () {
    return {
      searchForm: {
        taskCode: ''
      },
      TypeData: {
        currentPageRecords: [],
        totalCount: 10,
        totalPage: 5,
        pageIndex: 1,
        pageSize: 10
      },
      AddForm: {
        currentPageRecords: []
      },
      loading: false,
      // 子组件
      addVisible: false,
      ChangeVisible: false,
      policyVisible: false,
      morePolicyVisible: false,
      ChannelVisible: true,
      changeScope: {},
      policySope: {}
    }
  },
  async created () {
    await this.getVmSearchManager()
  },
  methods: {
    async getVmSearchManager () {
      const TypeQuery = {
        pageIndex: this.TypeData.pageIndex,
        pageSize: this.TypeData.pageSize,
        innerCode: this.searchForm.taskCode,
        status: ''
      }
      const { data } = await getVmSearchManager(TypeQuery)
      // console.log(data)
      this.TypeData = data
    },
    // 新增
    addType () {
      this.addVisible = true
    },
    // 修改
    changeType ({ row }) {
      this.changeScope = row
      console.log(this.changeScope)
      this.ChangeVisible = true
    },
    // 策略
    policy ({ row }) {
      this.policySope = row
      console.log(this.policySope)
      this.policyVisible = true
    },
    // 批量管理
    morePolicy () {
      this.morePolicyVisible = true
    },
    // 货道
    channel () {
      this.ChangeVisible = true
    },

    // 自定义索引
    getIndex (index) {
      if (this.TypeData.pageIndex === '1') {
        return index + 1
      } else {
        return index + 10 * (this.TypeData.pageIndex - 1) + 1
      }
    },
    paginaTion (res) {
      if (!this.loading) {
        if (res > this.TypeData.pageIndex) {
          this.TypeData.pageIndex++
          // 重新获取数据
          this.getVmSearchManager()
        } else {
          this.TypeData.pageIndex--
          this.getVmSearchManager()
        }
      }
    }
  },
  computed: {
    getTotalCount () {
      return +this.TypeData.totalCount
    }
  }
}
</script>

<style></style>
